<template>
  <a-form-model :model="form" layout="horizontal" :label-col="{ span: 4 }" :wrapper-col="{ span: 16 }">
    <a-form-model-item label="图片位置">
      <a-select v-model="form.imgPosition">
        <a-select-option value="left">
          图片在左
        </a-select-option>
        <a-select-option value="right">
          图片在右
        </a-select-option>
      </a-select>
    </a-form-model-item>
    <a-form-model-item label="填充内容">
      <a-select v-modal="form.fill">
        <a-select-option value="text">
          文字
        </a-select-option>
        <a-select-option value="table">
          表格
        </a-select-option>
      </a-select>
    </a-form-model-item>
  </a-form-model>
</template>
<script>
export default {
  data() {
    return {
      form: {
        imgPosition: 'left',
        fill: 'text',
      },
    };
  },
  methods: {
    onSubmit() {
      console.log('submit!', this.form);
    },
  },
  watch: {
    form: {
      handler(nVal, oVal) {
        console.log('nVal==', nVal);
      },
      immediate: true,
      deep: true,
    }
  }
};
</script>
